<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>花间电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.8.3.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/favorites.css" />
		<link rel="stylesheet" type="text/css" href="../css/imgmove.css" />
		<script src="../js/imgmove.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/someFunction.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			//为了查询设置的全局参数
			var pageNum = 0;
			var pageSize = 0;
			var prePage = 0;
			var nextPage = 0;
			var navigatepageNums = [];

			//根据分页条的选择的页数进行查询
			function PaginationListSelect(num,size) {
				showCollectProduct(num,size)
			}

			//取消收藏
			function stopCollect(fid) {
				if (confirm("确定要取消对该商品的收藏吗？")) {
					//取消商品收藏的方法
					cancelCollect(fid);
					//刷新页面
					location.reload();
				}
			}

			//加入购物车功能
			function addCollectToCart(pid,price){
				if (confirm("确定要将此商品加入购物车吗？")){
					$.ajax({
						url: "/cart/addCart",
						type: "post",
						data: {pid:pid,price:price,num:1},
						dataType: "json",
						success: function (res) {
							alert("已成功加入购物车，在购物车等您结算哟！")
						},
						error : function (err) {
							alert("服务器出现错误，加入购物车失败！")
						}
					})
				}
			}

			//将分页查询数据填充至页面
			function addDataIntoList(res) {
				//在填充数据之前必须先将这两个div标签内的所有元素情况，不然会出现叠加情况
				$("#collectList").empty();
				$("#PaginationList").empty();
				let collectListStr = ""
				//获取分页信息中商品的数量
				let dataLength = res.data.list.length
				//填充商品信息至页面
				for (let i = 0; i < dataLength; i++) {
					let favorite = res.data.list[i]
					collectListStr = "<div class=\"col-md-3\">"
							+ "<div class=\"goods-panel\">"
							+ "<img src=.." + favorite.image + "collect.png" + "  class=\"img-responsive\" />"
							+ "<p>￥" + favorite.price  + ".00" + "</p>"
							+ "<div class=\"text-row-3\">"
							+ "<a href=product.html?pid=" + favorite.pid
							+ "><small>"
							+ favorite.title
							+ "</small></a></div>"
							+ "<span style='padding-right: 10px'>"
							+ "<a href='javascript:void(0)' onclick='stopCollect(#{fid})'  class='btn btn-default btn-xs add-fav'><span class='fa fa-heart'></span>取消收藏</a>"
							+ "</span>"
							+ "<span style='padding-right: 10px'>"
							+ "<a href='javascript:void(0)' onclick='addCollectToCart(#{pid},#{price})' class=\"btn btn-default btn-xs add-cart\"><span class=\"fa fa-cart-arrow-down\"></span>加入购物车</a>"
							+ "</span></div></div>"

					collectListStr = collectListStr.replace("#{fid}",favorite.fid)
					collectListStr = collectListStr.replace("#{pid}",favorite.pid)
					collectListStr = collectListStr.replace("#{price}",favorite.price)
					$("#collectList").append(collectListStr)
					//激活鼠标进入图片有变化的功能
					classFunction();

				}
				//重新填充分页条
				// 将数据返回的部分需要数据进行填充至全局参数
				pageNum = res.data.pageNum //当前页
				pageSize = res.data.pageSize  //每页显示数
				prePage =  res.data.prePage //上一页
				nextPage = res.data.nextPage //下一页
				navigatepageNums = res.data.navigatepageNums //分页栏的数字

				let firstPage = "<a id='first' href='#' onclick='PaginationListSelect(prePage,pageSize)' style='padding-right: 8px'>上一页</a>"
				let lastPage = "<a id='end' href='javascript:void(0)' onclick='PaginationListSelect(nextPage,pageSize)' style='padding-right: 8px'>下一页</a>"
				let PaginationListStr = "";
				//判断是否是第一页
				if (res.data.isFirstPage){ //为true表示当前是第一页
					firstPage = "<a id='first' href='javascript:void(0)' "
							+ "style='opacity: 0.2;padding-right: 8px;color: black'>上一页</a>"
					PaginationListStr += firstPage;
				}else { //为false表示当前不是第一页
					PaginationListStr += firstPage;
				}
				//填充分页的页码数
				for (let i = 0; i < navigatepageNums.length; i++) {

					//当前页的页码
					let nowNum = navigatepageNums[i]
					if (nowNum == pageNum){ //相等表示i的次数和当前也相同，对页数显示做变化
						PaginationListStr += "<a href='javascript:void(0)' " +
								"style='padding-right: 8px;color: black' disabled='disabled'>" + "【"  + nowNum + "】" +"</a>"
					}else {
						PaginationListStr += "<a href='javascript:void(0)' onclick='PaginationListSelect(#{nowNum},pageSize)' " +
								"style='padding-right: 8px'>" + nowNum +"</a>"
					}
					PaginationListStr = PaginationListStr.replace("#{nowNum}",nowNum)

				}
				//判断是否是末页
				if (!res.data.isLastPage){ //取反为false表示当前是末页
					PaginationListStr += lastPage;
				}else { //为true表示当前是末页
					lastPage =  "<a id='end' href='javascript:void(0)' style='opacity: 0.2;padding-right: 8px;color: black'>下一页</a>"
					PaginationListStr += lastPage;
				}
				//将拼接的str串插入指定id处
				$("#PaginationList").append(PaginationListStr)
			}

			//发送分页查询数据的请求
			function showCollectProduct(num,size){
				let status = 1;
				$.ajax({
					url: "/favorites/queryFavorites",
					type: "get",
					data: "status=" + status + "&pageNum=" + num + "&pageSize=" + size,
					dataType: "json",
					success: function (res) {
						if(res.data.list.length !== 0){ //代表有数据
							//从showPageDataIntoHtml.js中导入的方法
							addDataIntoList(res)
						}else { //代表没数据
							$("#resultText").empty().html("暂无收藏商品，先去逛逛吧！")
						}

					},
					error : function (err) {
						alert("服务器出现错误，查询收藏商品失败！")
					}
				})
			}

			$(function () {

				//引入公共头部、中间导航条以及页脚
				$(".header").load("components/head.html")
				$(".footer").load("components/footer.html")
				$(".middleNavigation").load("components/middleNavigationBar.html")

				//网页加载完成自动发送ajax请求查询第一页的收藏商品列表
				showCollectProduct(1,4);

			})
		</script>
	</head>

	<body>
		<!--头部开始-->
		<div class="header"></div>
		<!--头部结束-->

		<!--中间导航条开始 -->
		<div class="middleNavigation"></div>
		<!--中间导航条结束-->

		<div class="col-md-offset-2" style="padding-bottom: 20px;">
			<h5 id="resultText" style="font-weight: bolder;color: red">
				以下是你的收藏商品：
			</h5>
		</div>

		<div class="container">
			<div id="collectList" class="col-md-offset-1 col-md-10">
			<!--		待填充内容		-->

			</div>

			<div class="col-md-offset-1 col-md-10">
				<p id="PaginationList" align="center">
					<!--		待填充内容		-->
				</p>
			</div>


		</div>





		<div class="clearfix"></div>
		<!--页脚开始-->
		<div class="footer"></div>
		<!--页脚结束-->

	</body>

</html>